---
title: fragment-matcher
description: Generate fragment matcher for Apollo Client. This plugin is required for using fragments with Apollo Client.
---

import { Callout, Tabs } from '@theguild/components'
import { PluginApiDocs, PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename)

<PluginHeader />

## How to use?

<Tabs items={['Usage with Apollo Client 3', 'Usage with Apollo Client 2']}>
<Tabs.Tab>
If you are using Apollo Client 3, update your codegen config accordingly, and then use it in your Apollo cache instance:

```ts
import { InMemoryCache } from '@apollo/client'

// generated by Fragment Matcher plugin
import generatedIntrospection from '../introspection-result'

const cache = new InMemoryCache({ possibleTypes: generatedIntrospection.possibleTypes })
```

<Callout>
[Read more about fragment matcher and its usage on Apollo Client](https://apollographql.com/docs/react/data/fragments/#defining-possibletypes-manually).
</Callout>
</Tabs.Tab>

<Tabs.Tab>
If you are using version 2 of Apollo-Client, you need to specify the `apolloClientVersion: 2{:ts}` configuration, and then use it like that:

```ts
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'

// generated by Fragment Matcher plugin
import introspectionQueryResultData from '../introspection-result'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
})

const cache = new InMemoryCache({ fragmentMatcher })
```

</Tabs.Tab>
</Tabs>

<PluginApiDocs />
